<template>
  <el-form-item class="edit-item edit-item-slider slider-normal" :label="label">
    <el-slider 
      v-model="modelValue_"
      :min="min"
      :max="max"
      :step="step"
      :disabled="disabled"
      :show-input="true"
      :show-input-controls="false"
      @change="onChange">
    </el-slider>
    <span v-if="unit">{{unit}}</span>
  </el-form-item>
</template>

<script setup lang="ts">
import TooltipCommon from './tooltip-common.vue'

interface Props {
  modelValue: string | number,
  label: string,
  min?: number,
  max?: number,
  step?: number,
  disabled?: boolean,
  unit?: string
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: 0,
  min: 0,
  max: 1,
  step: 0.1,
  disabled: false,
  unit: ''
})
const modelValue_ = ref(props.modelValue)

const emit = defineEmits(['change','update:modelValue'])

const onChange = (val: string | number) => {
  emit('update:modelValue', val)
  emit('change', val)
}
</script>
